<template>
  <div class="rmember">
    <el-table :data="listData" style="width: 100%">
      <el-table-column label="权益类型" width="120">
        <template slot-scope="scope">
          <span>{{ ptypeMap[scope.row.ptype] }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="权益名称"
        prop="privilegeName"
        width="120"
      ></el-table-column>
      <el-table-column prop="illustrate" label="权益说明"></el-table-column>
      <el-table-column width="180" label="操作">
        <template slot-scope="scope">
          <el-button
            @click="onUpdateStatus(scope.row, 0)"
            v-if="scope.row.open == 1"
            type="text"
            >关闭</el-button
          >
          <el-button
            @click="onUpdateStatus(scope.row, 1)"
            v-if="scope.row.open == 0"
            type="text"
            >开启</el-button
          >
          <el-button @click="onSetRule(scope.row)" type="text"
            >设置规则</el-button
          >
          <el-button
            @click="onDelRow(scope.row)"
            v-if="scope.row.allowDel == 1"
            type="text"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-button class="setupcon__item3--addnew" type="text" @click="onSetRule()"
      >添加自定义权益</el-button
    >
    <el-pagination
      @current-change="handleCurrentChange"
      :current-page.sync="pageNum"
      :page-size="pageSize"
      :pageNum="pageNum"
      layout="total, prev, pager, next"
      :total="total"
    ></el-pagination>
    <set-rule ref="setRuleRef" @reFresh="getDataList" />
  </div>
</template>

<script lang="ts">
import { Vue, Component, Ref } from "vue-property-decorator";
import SetRule from "../dialog/SetRule.vue";
import {
  getMemberCardPrivilege,
  updateMemberCardPrivilegeStatus,
  deleteMemberCardPrivilege,
} from "@/api/customer/member";

@Component({
  components: {
    SetRule,
  },
})
export default class MembeRequity extends Vue {
  @Ref() readonly setRuleRef;

  // 表格数据
  listData: any[] = [];

  // 分页条数
  pageSize = 30;

  // 页码
  pageNum = 1;

  // 总数
  total = 0;

  created() {
    this.getDataList();
  }

  // 权益类型映射
  ptypeMap = {
    0: "自定义权益",
    1: "商品折扣",
    2: "物流优惠",
    3: "积分加倍",
    4: "专属客服",
    5: "优先发货",
    6: "急速售后",
  };

  // 获取表格数据
  getDataList() {
    // this.listData = [
    //   {
    //     id: 12,
    //     pType: "商品折扣",
    //     privilegeName: "商品折扣",
    //     illustrate: " 商品购买享受优惠价格",
    //   },
    //   {
    //     id: 13,
    //     pType: "商品折扣",
    //     privilegeName: "商品折扣",
    //     illustrate: " 商品购买享受优惠价格",
    //     isCus: true,
    //   },
    // ];
    getMemberCardPrivilege(null).then(res => {
      this.listData = res.data;
      this.total = res.data.length || 0;
    });
  }

  // 更新权益状态
  onUpdateStatus(rowData, type) {
    const openIndex = this.listData.filter(v => v.open == 1);
    if (openIndex.length === 1 && type === 0) {
      this.$message.error("至少有一项开启");
      return null;
    }
    if (openIndex.length === 12 && type === 1) {
      this.$message.error("最多开启12条权益");
      return null;
    }
    this.$confirm(
      type === 0
        ? "关闭权益后小程序端将不会显示，不影响已有会员使用，确定关闭吗？"
        : "开启权益将对已有会员生效，等级绑定时将显示该权益，确定启用吗？",
      "提示",
      {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      },
    ).then(() => {
      updateMemberCardPrivilegeStatus({ id: rowData.id, open: type }).then(() =>
        this.getDataList(),
      );
    });
  }

  // 表格分页变化
  handleCurrentChange() {
    this.getDataList();
  }

  // 设置规则
  onSetRule(row) {
    if (!row && this.listData && this.listData.length === 30) {
      this.$message.error("最多增加30条权益!");
      return null;
    }
    this.setRuleRef.init(row || null);
  }

  // 删除自定义权益
  onDelRow(row) {
    this.$confirm(
      "删除权益后将删除无法恢复，不影响已有会员使用，确定删除吗？",
      "提示",
      {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      },
    ).then(() => {
      deleteMemberCardPrivilege({ id: row.id, isDeleted: 1 })
        .then(() => this.getDataList())
        .catch(res => {
          this.$message({
            type: "error",
            message: res,
          });
        });
    });
  }
}
</script>

<style lang="scss" scoped>
@include b(rmember) {
  .m__table--body .body--content td:first-child {
    border-left: 1px solid #ededed;
  }
  /deep/ .m__table--head th {
    text-align: left;
  }
  /deep/ .el-pagination {
    text-align: right;
  }
  /deep/ .m__table--item {
    border-left: none;
  }
}
</style>
